export function domMouseDrag(el, parentDom, cb) {
  console.log("move");
  el.onmousedown = (e) => {
    el && (el.style.zIndex = 3);
    console.log("e", e);
    // 算出鼠标相对元素的位置
    let disX = e.clientX - el.offsetLeft;
    let disY = e.clientY - el.offsetTop;
    let left, top;
    document.onmousemove = (e) => {
      const oEvent = e || window.event;
      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      left = oEvent.clientX - disX;
      top = oEvent.clientY - disY;
      const content = parentDom;
      if (el) {
        if (left <= 0) {
          left = 0;
        } else if (left >= content.clientWidth - el.offsetWidth) {
          left = content.clientWidth - el.offsetWidth;
        }
        if (top <= 0) {
          top = 0;
        } else if (top >= content.clientHeight - el.offsetHeight) {
          top = content.clientHeight - el.offsetHeight;
        }

        el.style.top = top + "px";
        el.style.left = left + "px";
      }

      cb ({
        isMouseup: false,
        top: top,
        left: left,
        centerX: left + el.offsetWidth / 2,
        centerY: top + el.offsetHeight / 2
      })
    };

    document.onmouseup = (e) => {
       cb ({
        isMouseup: true,
        top: top,
        left: left,
        centerX: left + (el.offsetWidth / 2),
        centerY: top + (el.offsetHeight / 2)
      })
      el && (el.style.zIndex = 2);
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
}

// function move() {
//   console.log("move");
//   let el = document.getElementById("test-layer");
//   el.onmousedown = (e) => {
//     el && (el.style.zIndex = 3);
//     console.log("e", e);
//     // 算出鼠标相对元素的位置
//     let disX = e.clientX - el.offsetLeft;
//     let disY = e.clientY - el.offsetTop;
//     let left, top;
//     document.onmousemove = (e) => {
//       const oEvent = e || window.event;
//       // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
//       left = oEvent.clientX - disX;
//       top = oEvent.clientY - disY;
//       const content = threeref.value;
//       if (el) {
//         if (left <= 0) {
//           left = 0;
//         } else if (left >= content.clientWidth - el.offsetWidth) {
//           left = content.clientWidth - el.offsetWidth;
//         }
//         if (top <= 0) {
//           top = 0;
//         } else if (top >= content.clientHeight - el.offsetHeight) {
//           top = content.clientHeight - el.offsetHeight;
//         }

//         el.style.top = top + "px";
//         el.style.left = left + "px";
//       }
//       layerInfo.value.screen_x = left;
//       layerInfo.value.screen_y = top;
//     };

//     document.onmouseup = (e) => {
//       console.log("移动");
//       console.log(el.offsetHeight)
//       console.log(el.offsetWidth)
//       modelInfo.renderPointToLine([
//         {
//           index: 0,
//           mouse: {x:layerInfo.value.screen_x + 50, y:layerInfo.value.screen_y + 50}
//         }
//       ]);

//       el && (el.style.zIndex = 2);
//       document.onmousemove = null;
//       document.onmouseup = null;
//     };
//   };
// }